<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="./guanli.js"></script>
    <title>天梯游戏统计管理系统</title>
    <style>
        .container{
            position: relative;
        }
        .top{
            height: 120px;
            background-color:steelblue;
        }
        .logo{
            color: floralwhite;
            font-size: 30px;
            line-height: 120px;
            padding: 0 50px;
        }
        .center{
            position: absolute;
            top: 120px;
			bottom: 0;
			width: 100%;
        }
        .left{
            width: 220px;
			background-color:white;
			height: 100%;
			float: left;
			font-size: 14px;
        }
        .left > .ul {
			text-align: center;
		}
        .left > .ul > li {
			line-height: 3em;
			border-bottom: 1px solid #cccccc;
			position: relative;
		}
		.left > .ul > li i.iconfont {
			position: absolute;
			left: 3em;
		}
		.left > .ul> li:hover{
			background-color: #cccccc;
			color: #ffffff;
		}
		.left > .ul > li:hover a {
			color: #ffffff;
		}
        .right{
            margin-left: 220px;
			height: 100%;
			overflow-y: auto;
			padding: 1em;
			box-sizing: border-box;
			background-color: #cccccc;
		}
        .right>.btn{
            height: 50px;
            width: 100px;
            margin-left: 10px;
            background-color:steelblue;
            border: 1px solid #ededed;
        }
        .table{
            margin-top: 10px;
            width: 1200px;
            margin-left: 10px;
            border-collapse: collapse;
        }
        table>thead>tr>td{
            border: 1px solid #ededed;
            line-height: 2em;
        }
        table>tbody>tr>td{
            border: 1px solid #ededed;
            line-height: 2em;
        }
        table>tbody>tr>td>.btn{
            background-color:steelblue;
            border: none
        }
        .btn:hover{
            box-shadow: 0 0 3px #ededed;
        }
        .text{
            display: none;
        }
        .btn{
            color: white;
            background-color: steelblue;
        }
        table{
            width: 500px;
        }
    </style>
</head>
<body>
    <div class="top">
        <div class="logo">
        天梯游戏统计管理系统
    </div>
    </div>
    <div class="center">
        <div class="left">
            <ul class="ul">
                <li>
                    <a href="yonghuguanli.html">用户管理</a>
                </li>
                <li>
                    <a href="youxiguanli.html">游戏管理</a>
                </li>   
                <li>
                    <a href="xinyudengji.html">信誉等级</a>
                </li>   
                <li>
                    <a href="wenjianguanli.html">文档管理</a>
                </li>  
            </ul>
        </div>
        <div class="right">
            <button class="btn btn-primary btn" data-toggle="modal" data-target="#myModal">等级查询</button>
            <button class="btn btn-primary btn" data-toggle="modal" data-target="#myModal2">积分规则</button>
            <table class="table" id="stuRecordTable">
                <thead>
                    <tr>
                        <td>选中</td>
                        <td>账号</td>
                        <td>账户名称</td>
                        <td>邮箱</td>
                        <td>手机号</td>
                        <td>信誉等级</td>
                        <td>信誉积分</td>
                        <td>操作</td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><input type="checkbox"></td>
                        <td>13619333574</td>
                        <td>姐就是女王</td>
                        <td>13619333574@qq.com</td>
                        <td>13753391819</td>
                        <td>5</td>
                        <td>120分</td>   
                        <td>
                            <button class="btn btn-primary btn" data-toggle="modal" data-target="#myModal3">删除</button>
                            <button class="btn btn-primary btn" data-toggle="modal" data-target="#myModal4">修改</button>
                        </td>
                    </tr>
                    <tr>
                        <td><input type="checkbox"></td>
                        <td>1598772841</td>
                        <td>吃不胖的胖子</td>
                        <td>1598772841@qq.com</td>
                        <td>15525230530</td>
                        <td>4</td>
                        <td>106分</td>   
                        <td>
                            <button class="btn btn-primary btn" data-toggle="modal" data-target="#myModal3">删除</button>
                            <button class="btn btn-primary btn" data-toggle="modal" data-target="#myModal4">修改</button>
                        </td>
                    </tr>
                    <tr>
                        <td><input type="checkbox"></td>
                        <td>2785426036</td>
                        <td>郭大帅很帅</td>
                        <td>2785426036@qq.com</td>
                        <td>19834545669</td>
                        <td>3</td>
                        <td>100分</td>   
                        <td>
                            <button class="btn btn-primary btn" data-toggle="modal" data-target="#myModal3">删除</button>
                            <button class="btn btn-primary btn" data-toggle="modal" data-target="#myModal4">修改</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        等级查询
                    </h4>
                </div>
                <div class="modal-body">
                    <table>
                        <tr>
                            <td>账号</td>
                            <td><input type="text"></td>
                        </tr>
                        <tr>
                            <td>密码</td>
                            <td><input type="text"></td>
                        </tr>           
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                    <button type="button" class="btn btn-primary">
                        查询
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        积分规则
                    </h4>
                </div>
                <div class="modal-body">
                    <table>
                        <tr>
                            <td>5级</td>
                            <td>110分-120分</td>
                        </tr>
                        <tr>
                            <td>4级</td>
                            <td>105分-109分</td>
                        </tr>
                        <tr>
                            <td>3级</td>
                            <td>100分-104分</td>
                        </tr>
                        <tr>
                            <td>2级</td>
                            <td>90分-99分</td>
                        </tr>
                        <tr>
                            <td>1级</td>
                            <td>0分-89分</td>
                        </tr>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">了解更多
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        用户删除
                    </h4>
                </div>
                <div class="modal-body">
                    <h1>确认删除该用户吗？</h1>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">确认
                    </button>
                    <button type="button" class="btn btn-primary">
                        取消
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="myModal4" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        修改
                    </h4>
                </div>
                <div class="modal-body">
                    <table>
                        <tr>
                            <td>账号</td>
                            <td><input type="text" value=""></td>
                        </tr>
                        <tr>
                            <td>密码</td>
                            <td><input type="text" value=""></td>
                        </tr>
                        <tr>
                            <td>邮箱</td>
                            <td><input type="text" value=""></td>
                        </tr>
                        <tr>
                            <td>手机号</td>
                            <td><input type="text" value=""></td>
                        </tr>
                        <tr>
                            <td>身份证号码</td>
                            <td><input type="text" value=""></td>
                        </tr>            
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                    <button type="button" class="btn btn-primary">
                        提交更改
                    </button>
                </div>
            </div>
        </div>
    </div>
</html>